<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="道路名称：">
              <el-input v-model="person.name" style="width: 200px"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="所属标段：">
              <el-select v-model="person.LID" placeholder clearable>
                <el-option
                  v-for="item in areaBidListS"
                  :key="item.LID"
                  :label="item.LNAME"
                  :value="item.LID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="personQuery"
              >查 询</el-button
            >
            <!-- <el-button size="mini" type="success" @click="addNewPerson"
              >新 增</el-button
            > -->
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="道路等级：" >
              <el-select
                v-model="person.RGrade"
                placeholderb
                filterable
                clearable
              >
                <el-option
                  v-for="item in gradeList"
                  :key="item.gradeNAME"
                  :label="item.gradeNAME"
                  :value="item.gradeNAME"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="所属班组：">
              <el-select
                v-model="person.CLIENT_NO"
                placeholderb
                filterable
                clearable
                @change="changeClientOptions"
              >
                <el-option
                  v-for="item in clientList"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
        </el-col>
        <!-- <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="所属网格：">
              <el-select v-model="person.GID" placeholderb filterable clearable>
                <el-option
                  v-for="item in GridData"
                  :key="item.GID"
                  :label="item.GNAME"
                  :value="item.GID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col> -->
        <!-- <el-col :span="4">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="showBindRoad"
              >绑定标段</el-button
            >
          </el-form>
        </el-col> -->
      </el-row>
    </div>

    <el-table
      v-loading="loading"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column prop="RNAME" label="道路名称" align="center">
      </el-table-column>
      <el-table-column
        prop="LNAME"
        label="所属区域"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="UNITNAME"
        label="作业单位"
        align="center"
        :formatter="formatterUNITNAME"
      ></el-table-column>
      <el-table-column
        prop="RGrade"
        label="道路等级"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="begin"
        label="开始点位"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="end"
        label="结束点位"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="LENGTH"
        label="道路长度"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="WIDTH"
        label="道路宽度"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="RArea"
        label="道路面积"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ISWORK"
        label="是否作业"
        align="center"
        :formatter="formatterIswork"
      ></el-table-column>
      <el-table-column
        label="是否单行"
        align="center"
      ></el-table-column>
      <el-table-column
        label="单行方向"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          > -->
          <!-- <el-button
            type="text"
            @click="showRoadGPSTable(scope.$index, scope.row)"
            >经纬度</el-button
          > -->
          <el-button
            type="text"
            @click="showRoadGPSMap(scope.$index, scope.row)"
            >展示路线</el-button
          >
          <!-- <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="isVisibleEdit"
      width="50%"
      :modal="false"
    >
      <el-form ref="form" :model="form" label-width="100px" class="flex">
        <el-form-item label="道路名称：" class="wid50">
          <el-input
            :disabled="addDialogTitle === '编辑路段信息'"
            v-model="form.RNAME"
            placeholder="请输入道路名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="道路等级：" class="wid50">
          <el-select v-model="form.RGrade" placeholderb filterable clearable>
            <el-option
              v-for="item in gradeListS"
              :key="item.gradeNAME"
              :label="item.gradeNAME"
              :value="item.gradeNAME"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始位置：" class="wid50">
          <el-input
            v-model="form.begin"
            placeholder="请输入开始位置"
          ></el-input>
        </el-form-item>
        <el-form-item label="结束位置：" class="wid50">
          <el-input v-model="form.end" placeholder="请输入结束位置"></el-input>
        </el-form-item>
        <el-form-item label="长度：" class="wid50">
          <el-input v-model="form.LENGTH" placeholder="请输入长度"></el-input>
        </el-form-item>
        <el-form-item label="宽度：" class="wid50">
          <el-input v-model="form.WIDTH" placeholder="请输入宽度"></el-input>
        </el-form-item>
        <el-form-item label="面积：" class="wid50">
          <el-input v-model="form.RArea" placeholder="请输入面积"></el-input>
        </el-form-item>
        <el-form-item label="是否启用：" class="wid50">
          <el-select v-model="form.ISWORK" placeholder>
            <el-option
              v-for="item in useList"
              :key="item.useNO"
              :label="item.useNAME"
              :value="item.useNO"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定标段：" class="wid50">
          <el-select v-model="form.LID" placeholder>
            <el-option
              v-for="item in areaBidList"
              :key="item.LID"
              :label="item.LNAME"
              :value="item.LID"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="所属班组：" class="wid50">
          <el-select
            v-model="form.CLIENT_NO"
            placeholderb
            filterable
            clearable
            @change="changeClientOptions"
          >
            <el-option
              v-for="item in clientList"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="所属网格：" class="wid50">
          <el-select v-model="form.GID" placeholderb filterable clearable>
            <el-option
              v-for="item in GridData"
              :key="item.GID"
              :label="item.GNAME"
              :value="item.GID"
            ></el-option>
          </el-select>
        </el-form-item> -->

        
        
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 车辆轨迹回放控弹出框 -->
    <el-dialog
      @open="dialogOpenMap"
      :before-close="dialogCloseMap"
      title="道路展示"
      :visible.sync="formMapDialog.show"
      width="80%"
    >
      <div style="width: 100%; height: 500px">
        <div style="width: 50%; height: 100%; float: left" id="mapDialog"></div>
        <div style="width: 49%; height: 100%; float: left; margin-left: 1%">
          <div style="height: 8%">
            <el-button style="padding: 0; border: 0">
              <el-upload
                action="/上传文件的接口"
                :on-change="onChange"
                :auto-upload="false"
                :show-file-list="false"
                accept=".xls, .xlsx"
                class="upload"
              >
                <el-button size="mini" type="success">经纬度导入</el-button>
              </el-upload>
            </el-button>
          </div>
          <el-table
            :data="formMapDialog.dataTable"
            height="92%"
            :span-method="objectSpanMethod"
          >
            <el-table-column
              prop="ROUDID"
              label="路段线ID"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="LNG"
              label="经度"
              align="center"
              :formatter="formatterLng"
            ></el-table-column>
            <el-table-column
              prop="LAT"
              label="纬度"
              align="center"
              :formatter="formatterLat"
            ></el-table-column>
            <el-table-column
              prop="numS"
              label="顺序"
              align="center"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="handleEditRoadPartByROUDID(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  @click="handleDeleteRoadPartByROUDID(scope.$index, scope.row)"
                  style="color: red"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formMapDialog.show = false">取 消</el-button>
        <!-- <el-button type="primary" @click="formMapDialog.show = false"
          >确 定</el-button
        > -->
      </span>
    </el-dialog>

    <!-- 批量绑定道路弹出框 -->
    <el-dialog
      title="道路绑定标段"
      :visible.sync="formBR.show"
      width="50%"
      :modal="false"
    >
      <el-form ref="formBR" :model="formBR" label-width="100px" class="flex">
        <el-form-item label="标段：">
          <el-select v-model="formBR.LOTID">
            <el-option
              v-for="item in areaBidList"
              :key="item.LID"
              :label="item.LNAME"
              :value="item.LID"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="formBR.show = false">取 消</el-button>
        <el-button type="primary" @click="saveRoadBindLot()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import closeBtnImg from '@/assets/img/define.png'
import '@/assets/css/common.css'
// import { formatDate } from '@/common/js/date.js'
// import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      formBR: {
        showBtn: false,
        show: false,
        LOTID: '',
        roadList: []
      },
      formMapDialog: {
        show: false,
        dataTable: [],
        roadName: '',
        selectedPath: '',
        polyline: null,
      },
      addDialogTitle: '',
      loading: false,
      currentPage: 1, //初始页
      pageSize: 7,    //    每页的数据
      currentPageD: 1, //初始页
      pageSizeD: 10,    //    每页的数据
      // 路段管理
      person: {
        CLIENT_NO: '',
        name: '',
        LID: '',
        GID: '',
        team: '',
        RGrade: '全部',
        teamList: []
      },
      // 新增路段
      form: {
        name: '',
        LID: '',
        GID: '',
      },
      tableData: [],
      originalData: [],
      areaList: [],
      areaBidList: [],
      areaBidListS: [],
      GridData: [],
      clientList: [],
      useList: [{
        useNO: '0',
        useNAME: '否',
      }, {
        useNO: '1',
        useNAME: '是',
      }],
      gradeList: [{
        gradeNO: '0',
        gradeNAME: '全部',
      },{
        gradeNO: '1',
        gradeNAME: '一级',
      }, {
        gradeNO: '2',
        gradeNAME: '二级',
      }, {
        gradeNO: '3',
        gradeNAME: '三级',
      }, {
        gradeNO: '4',
        gradeNAME: '四级',
      }],
gradeListS: [{
        gradeNO: '1',
        gradeNAME: '一级',
      }, {
        gradeNO: '2',
        gradeNAME: '二级',
      }, {
        gradeNO: '3',
        gradeNAME: '三级',
      }, {
        gradeNO: '4',
        gradeNAME: '四级',
      }],
      personSettingForm: {
        show: false
      },
      isVisibleEdit: false,
      roadGPSDialogShow: false,
      mapDialog: null,
      loadingDialog: false,
      unitList: [],

    }
  },
  created () {
    // this.getClientList();
    this.getAreaBidList();
    this.getUnit();
  },
  methods: {
    async getUnit () {
      var url = 'Assess/GetUnit_Assess?UNITNAME='
      const { data } = await this.$Http.get(url)
      this.unitList = data
      this.getlistdata()
    },
    async getAreaBidList () {
      var url = 'Vehicle/GetLotInfoPB?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.areaBidList = Object.assign({}, data);
      this.areaBidListS = data;
      this.areaBidListS.unshift({ "LID":"0","LNAME":"未绑定"})
    },
    // async getGridList () {
    //   const { data } = await this.$Http.get('Worker/getGridPB?ClientNo=' + this.person.CLIENT_NO)
    //   this.GridData = data
    // },
    // async changeClientOptions () {
    //   this.getGridList()
    // },
    async getlistdata () {
      this.loading = true
      var url = "Vehicle/GetRoadInfoPB?ClientNO=" + localStorage.getItem('CLIENT_NO');
      const { data } = await this.$Http.get(url)
      this.originalData = data
      this.originalData.forEach(element => {
        if (element.LID === null) {
          element.LID = "0"
        }
      });
      this.personQuery()
  
    },
    // 路段管理查询
    personQuery () {
      this.currentPage = 1;
      this.tableData = this.originalData
      const { name, LID, RGrade } = this.person
      if (name) this.tableData = this.tableData.filter(item => item.RNAME.includes(name))
      if (RGrade != '全部') this.tableData = this.tableData.filter(item => item.RGrade == RGrade)
      if (LID) this.tableData = this.tableData.filter(item => item.LID == LID)
      this.loading = false
    },
    formatterUNITNAME(row) {
      var unitItem = this.unitList.filter(item => item.AREANAME === row.LNAME)[0]
      if (unitItem) {
        return unitItem.UNITNAME
      } else {
        return ''
      }
    },
    // 新增路段
    addNewPerson () {
      this.addDialogTitle = '新增路段信息'
      //清空编辑框
      this.form = {}
      //展示窗口
      this.isVisibleEdit = true;
    },
    // 编辑路段
    async handleEdit (index, row) {
      this.form = Object.assign({}, row);
      this.addDialogTitle = '编辑路段信息'
      this.isVisibleEdit = true;
    },
    // 点击保存，判断是新增还是编辑操作
    handleSubmit () {
      if (this.addDialogTitle == '新增路段信息') {
        this.saveAdd()
      } else {
        this.saveEdit()
      }
    },
    // 新增保存
    async saveAdd () {
      // console.log(this.addform)
      this.$axios({
        url: 'Vehicle/SaveRoadInfoPB',
        method: 'post',
        data: {
          RID: '-1',
          RNAME: this.form.RNAME,
          RGrade: this.form.RGrade,
          begin: this.form.begin,
          end: this.form.end,
          LENGTH: this.form.LENGTH,
          RArea: this.form.RArea,
          WIDTH: this.form.WIDTH,
          ISWORK: this.form.ISWORK,
          LOTID: this.form.LID,
        },

      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功');
          this.isVisibleEdit = false
          this.getlistdata()
        } else {
          this.$message.error('新增失败');
        }
      })

    },
    // 保存编辑
    async saveEdit () {
      this.$axios({
        url: 'Vehicle/SaveRoadInfoPB',
        method: 'post',
        data: {
          RID: this.form.ID,
          RNAME: this.form.RNAME,
          RGrade: this.form.RGrade,
          begin: this.form.begin,
          end: this.form.end,
          LENGTH: this.form.LENGTH,
          RArea: this.form.RArea,
          WIDTH: this.form.WIDTH,
          ISWORK: this.form.ISWORK,
          LOTID: this.form.LID,
        },

      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('编辑成功');
          this.isVisibleEdit = false
          this.getlistdata()
        } else {
          this.$message.error('编辑失败');
        }
      })
    },
    // 导入Excel
    onChange (file, fileList) {
      //  console.log(fileList);
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    // 读取数据
    readExcel (e) {
      let that = this;
      const files = that.fileData;
      console.log(files);
      if (!files) {
        //如果没有文件
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      console.log(fileReader)
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          //  console.log(ev.target)
          //  console.log(this);
          const workbook = this.XLSX.read(data, {
            type: "binary"// 以字符编码的方式解析
          });

          if (workbook.SheetNames.length > 0) {
            // const wsname = workbook.SheetNames[0];
            workbook.SheetNames.forEach(element => {
              const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[element]); //生成json表格内容
              this.bulkLoad(ws)
            });

          } else {
            this.$message.error("未读取到表格内容");
          }
        } catch (e) {
          console.log(e)
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    },
    async bulkLoad (ws) {
      ws[0].ROUDID = '-1'
      ws[0].NAME = this.formMapDialog.roadName
      this.$axios({
        url: 'Vehicle/SaveRoadGPSInfoPB',
        method: 'post',
        data: ws
      }).then(res => {
        console.log(res)
        if (res.data.IsSucess) {
          this.getRoadGPS();
          // this.$message.success('班组经纬度保存成功')
          // this.dialogCloseMap()
          // this.getAreaTeam()
          // this.drawAreaTeam()
        } else {
          this.$message.error('班组经纬度保存失败' + '，' + res.data.Message);
        }
      })
    },
    // async bulkLoad1 (ws) {
    //   console.log(ws)
    //   var strLNG = '';
    //   var strLAT = '';
    //   ws.forEach(element => {
    //     strLNG += element.LNG + ','
    //     strLAT += element.LAT + ','
    //   });
    //   strLNG = strLNG.slice(0, strLNG.length - 1)
    //   strLAT = strLAT.slice(0, strLAT.length - 1)

    //   var url = 'Worker/SaveRoadGPSInfoPBNew?ID=-1&RNAME=' + this.formMapDialog.roadName + '&LNGS=' + strLNG + '&LATS=' + strLAT
    //   // console.log(url)
    //   const { data } = await this.$Http.get(url)
    //   console.log('结束')
    //   console.log(data)
    //   this.getRoadGPS();
    // },
    formatterIswork (row, column, cellValue, index) {
      console.log(cellValue)
      if (cellValue === '1') {
        return '作业'
      }
      else {
        return '未作业'
      }
    },
    formatterLng (row) {
      return row.LNG.toFixed(parseFloat(6))
    },
    formatterLat (row) {
      return row.LAT.toFixed(parseFloat(6))
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan,
          colspan: 1,
        };
      }
      if (columnIndex === 4) {
        return {
          rowspan: row.rowspan,
          colspan: 1,
        };
      }
    },
    // 编辑经纬度信息
    async getRoadGPS () {
      this.formMapDialog.dataTable = []
      this.mapDialog.clearOverlays()
      var url = "Vehicle/GetRoadAllGPSInfoPB?ROADNAME=" + this.formMapDialog.roadName
      const { data } = await this.$Http.get(url)
      var rid = data[0].ROUDID
      var points = []
      var pointAll = []

      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        if (element.ROUDID === rid) {
          points.push(new BMap.Point(element.LNG, element.LAT))
          pointAll.push(new BMap.Point(element.LNG, element.LAT))
        } else {
          this.drawRoad(rid, points)

          rid = element.ROUDID
          points = []
          points.push(new BMap.Point(element.LNG, element.LAT))
          // districtName = element.行政区划
        }
        element.numS = points.length
      }
      this.drawRoad(rid, points)
      this.mapDialog.setViewport(pointAll);

      this.formMapDialog.dataTable = data
      for (let i = this.formMapDialog.dataTable.length - 1; i > 0; i--) {
        //从后向前遍历
        if (!this.formMapDialog.dataTable[i].rowspan) {
          //设置初始值(可理解为：每个数据项必定占一行)
          this.formMapDialog.dataTable[i].rowspan = 1;
        }
        if (i > 0 &&
          this.formMapDialog.dataTable[i].ROUDID == this.formMapDialog.dataTable[i - 1].ROUDID
        ) {
          //当前公司名与前一个数据的公司相同时 设置rowspan（前数据一项与下一行的相同时 合并一行）
          this.formMapDialog.dataTable[i - 1].rowspan = this.formMapDialog.dataTable[i].rowspan + 1;
          this.formMapDialog.dataTable[i].rowspan = 0;
        }
      }

      this.formMapDialog.dataTable = data
    },
    drawRoad (rid, points) {
      // rid 标签 label
      // var opts = {
      //   position: points[0], // 指定文本标注所在的地理位置
      //   offset: new BMap.Size(10, -10) // 设置文本偏移量
      // };
      // // 创建文本标注对象
      // var label = new BMap.Label(rid, opts);
      // this.mapDialog.addOverlay(label);

      // 道路画线
      var polyline = new BMap.Polyline(points, { strokeColor: "blue", strokeWeight: 4, strokeOpacity: 0.5 });   //创建折线
      this.mapDialog.addOverlay(polyline);
      polyline.rid = rid

      const _this = this
      polyline.addEventListener('click', function (e) {
        _this.editPolyline(this)
      })
    },
    showRoadGPSMap (index, row) {
      this.formMapDialog.show = true
      this.formMapDialog.roadName = row.RNAME
      // this.formMapDialog.roadName = '中南二街1'
      // this.getRoadGPS(row, 1);
    },
    dialogCloseMap () {
      this.formMapDialog.show = false
      this.mapDialog.clearOverlays()
    },
    dialogOpenMap () {
      setTimeout(() => {
        if (!this.mapDialog) {
          this.mapDialogShow()
        }
        this.getRoadGPS();
      }, 1000)
    },
    async mapDialogShow () {
      this.mapDialog = new BMap.Map('mapDialog')// 创建Map实例
      // 初始化地图,设置中心点坐标和地图级别
      this.mapDialog.centerAndZoom(
        new BMap.Point(
          localStorage.getItem("LNG"),
          localStorage.getItem("LAT")
        ),
        16
      );
      this.mapDialog.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
    },
    handleEditRoadPartByROUDID (index, row) {
      this.mapDialog.getOverlays().forEach(element => {
        if (element.rid === row.ROUDID) {
          this.editPolyline(element)
        }
      });

    },
    editPolyline (polyline) {
      if (this.polyline) {
        this.polyline.disableEditing()
      }
      this.polyline = polyline
      polyline.enableEditing()
      this.formMapDialog.selectedPath = polyline.getPath()

      // 完成关闭按钮
      var m = new BMap.Icon(closeBtnImg, new BMap.Size(40, 40))
      var closeBtn = new BMap.Marker(polyline.getBounds().getNorthEast(), { icon: m, offset: new BMap.Size(0, -15) })
      this.mapDialog.addOverlay(closeBtn)
      const _this = this
      closeBtn.addEventListener('click', function (r) {
        polyline.disableEditing()

        _this.$confirm('是否保存此修改？', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          _this.savePolyline(polyline.getPath(), polyline.rid)
        }).catch(() => {
        });


        _this.mapDialog.removeOverlay(this)
      })

    },
    async savePolyline (ws, rid) {
      ws[0].ROUDID = rid
      ws[0].NAME = this.formMapDialog.roadName
      this.$axios({
        url: 'Vehicle/SaveRoadGPSInfoPBTowgs84',
        method: 'post',
        data: ws
      }).then(res => {
        console.log(res)
        if (res.data.IsSucess) {
          this.getRoadGPS();
          // this.$message.success('班组经纬度保存成功')
          // this.dialogCloseMap()
          // this.getAreaTeam()
          // this.drawAreaTeam()
        } else {
          this.$message.error('班组经纬度保存失败' + '，' + res.data.Message);
        }
      })
    },
    async handleDeleteRoadPartByROUDID (index, row) {
      const { data } = await this.$Http.get('Vehicle/DeteleRoadPart?ROUDID=' + row.ROUDID)
      if (data.IsSucess) {
        this.$message.success('删除成功');
        this.getRoadGPS()
      } else {
        this.$message.error('删除失败');
      }
    },
    // 删除路段信息
    async handleDelete (index, row) {
      const confirmResult = await this.$confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          ID: row.ID,
        }
        const { data } = await this.$Http.get('Vehicle/DeleteRoadInfoPB', { params })
        if (data.IsSucess) {
          this.$message.success('删除成功')
          this.isVisibleEdit = false
          this.getlistdata()
        } else {
          this.$message.error('删除失败');
        }
      } else {
        this.$message.info('取消删除')
        this.isVisibleEdit = false
      }

    },
    handleSelectionChange (val) {
      console.log(val)
      if (val.length > 0) {
        this.formBR.roadList = val
      }
    },
    showBindRoad (val) {
      this.formBR.show = true
    },
    async saveRoadBindLot () {
      if (this.formBR.roadList.length > 0) {
        var str = '';
        this.formBR.roadList.forEach(element => {
          str = str + element.ID + ','
        });
        str = str.substring(0, str.length - 1);
        var url = 'Vehicle/SaveLotRoadInfoPB?LID=' + this.formBR.LOTID + '&ROADID=' + str
        const { data } = await this.$Http.get(url)
        if (data.IsSucess) {
          this.$message.success('绑定成功');
          this.getlistdata();
          this.formBR.show = false
          this.formBR.roadList = []
        } else {
          this.$message.error('绑定失败');
        }
      } else {
        this.$message.error('您还未选中绑定道路');
      }
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
    },
    handlePageChangeD (currentPage) {
      this.currentPageD = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChangeD (size) {
      this.pageSizeD = size;
    }
  }
}
</script>
<style scoped lang='less'>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.new_person {
  .el-form {
    width: 300px;
    // height: 180px;
    margin: 10px auto;
    background-color: #dfe8f6;
    .el-form-item {
      margin-bottom: 20px;
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      // padding-top: 10px;
      .el-button {
        margin: 0 10px;
        /deep/span {
          padding: 0 5px;
        }
      }
    }
  }
}
.box {
  display: block;
  position: relative;
  height: 6.771vw;
  overflow: auto;
}
.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.marquee_top {
  transition: all 1s;
  margin-top: -1.563vw;
}
.marquee_list li {
  height: 1.354vw;
  line-height: 1.354vw;
}
.marquee_list li span {
  padding: 0.26vw;
  font-size: 0.729vw;
}
</style>